<script setup>
// 如果需要动态数据，可以使用 props 或者引入一个数据文件
const scores = {
  total: 723,
  maxTotal: 1050,
  subjects: [
    { name: '语文', score: 94, maxScore: 150 },
    { name: '数学', score: 88, maxScore: 150 },
    { name: '英语', score: 91.5, maxScore: 150 },
    { name: '物理', score: 80, maxScore: 100 },
    { name: '化学', score: 68.5, maxScore: 100 },
    { name: '生物', score: 68, maxScore: 100 },
    { name: '政治', score: 83, maxScore: 100 },
    { name: '历史', score: 80, maxScore: 100 },
    { name: '地理', score: 70, maxScore: 100 },
  ],
};
</script>

<template>
  <div class="scoreboard">
    <div class="total-score">
      <h1>{{ scores.total }} 分</h1>
      <p>满分 {{ scores.maxTotal }}</p>
    </div>
    <div class="subject-scores">
      <ul>
        <li v-for="subject in scores.subjects" :key="subject.name">
          <span class="subject-name">{{ subject.name }}</span>
          <span class="subject-score">{{ subject.score }} / {{ subject.maxScore }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.scoreboard {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.total-score {
  text-align: center;
  margin-bottom: 20px;
}

.total-score h1 {
  font-size: 36px;
  margin: 0;
  color: #333;
}

.total-score p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.subject-scores ul {
  list-style-type: none;
  padding: 0;
}

.subject-scores li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.subject-name {
  font-size: 16px;
  color: #333;
}

.subject-score {
  font-size: 16px;
  color: #555;
}
</style>
